<template>
  <template v-for="(item, i) in menuList">
    <el-sub-menu menu-type="el-sub-menu" v-if="item['children'] && item['children'].length > 0"
      :index="`${index}_${i}`" v-bind="$attrs" :style="{'display':isHidden(item)?'none':'block'}">
      <template #title>
        <i v-if="item['icon']" :class="item['icon']"></i>
        <el-icon-render size="20px" v-if="item.meta && item.meta.elIcon"
          :elIcon="item.meta.elIcon"></el-icon-render>
        <span>
          <span style="text-align: left; display: inline-block;">{{ item['label'] || item.meta.label }}</span>
        </span>
      </template>
      <el-menu-item-group menu-type='el-menu-item-group'>
        <el-menu-item :index="`${index}_${i}_${i2}`" v-for="(items, i2) in item.children"
          @click="menuClick(items, `${index}_${i}_${i2}`)" menu-type="el-menu-item"
          :style="{'display':isHidden(items)?'none':'block'}">
          <i v-if="items['icon']" :class="item['icon']"></i>
          <el-icon-render size="20px" v-if="items.meta && items.meta.elIcon"
            :elIcon="items.meta.elIcon"></el-icon-render>
          <template #title>
            <span style="text-align: left; display: inline-block;">{{ items['label'] || items.meta.label }}</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item @click="menuClick(item, `${index}_${i}}`)" v-else :index="`${index}_${i}`"
      menu-type="el-menu-item" :style="{'display':isHidden(item)?'none':'block'}">
      <i v-if="item['icon']" :class="item['icon']"></i>
      <el-icon-render :size="fontSize" v-if="item.meta && item.meta.elIcon"
        :elIcon="item.meta.elIcon"></el-icon-render>
      <template #title>
        <span style="text-align: left; display: inline-block;">{{ item['label'] || item.meta.label }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script>
import { watch, ref, computed, shallowRef } from 'vue';
//解决vue3 element-plus icon 图标 与 element-ui不同的问题
import elIconRender from '@/components/render/el-icon-render.tsx';
export default {
  components: { elIconRender },
  name: 'menu-tree-item',
  props: {
    list: Array,
    index: String,
  },
  emits: ['click'],
  setup(props, ctx) {
    const list = ref(props.list);
    watch(() => props.list, (news) => list.value = news, { deep: true });

    const index = ref(props.index);
    watch(() => props.index, (news) => index.value = news);

    const isHidden = function (item) {
      if (!item.meta || !item.meta.hidden) {
        return false;
      }
      return true;
    }

    const menuClick = function (e, index) {
      if (index) {
        e.activeIndex = index;
      }
      ctx.emit('click', e);
    }
    /**
     * 当节点中的 meta 属性 hidden==true时，隐藏不显示
     */
    const menuList = computed(() => {
      return list.value.filter(item => !item.meta || (!item?.meta?.hidden));
});
    });
    console.log(menuList,'555')


    const fontSize = 20;
    return {
      list,
      menuList,
      index,
      menuClick,
      isHidden,
      fontSize
    }
  }
}
</script>

<style>
[menu-type='el-menu-item-group'] .el-menu-item-group__title {
  height: 0px !important;
  display: none !important;

}
</style>
